<template>
    <header class="wrap">
        <div class="wrap_left">
            <a class="wrap_a" href="javascript:history.back()">
                <i class="head_icon"></i>
            </a>
        </div>
        <span class="head_span">选择城市</span>
        <div class="wrap_right" @click="showMore()">
            <a class="wrap_right_one">
                <span class="wrap_right_span">
                    <i class="wrap_right_i">
                        <img class="wrap_right_img" src="../../../assets/img/menu.png">
                    </i>
                    菜单
                </span>
            </a>
        </div>
        <div v-model="isActive" :class="{'wrap_right_menu':true,'wrap_right_menu_active':isActive}" >
            <ul>
                <li>
                    <a class="more_home" href="/">首页</a>
                </li>
                <li>
                    <a class="more_home" href="/">搜索</a>
                </li>
            </ul>
        </div>
    </header>
</template>

<script>
    export default {
        name: "CityRightMenu",
        data(){
          return{
              isActive:false
          }
        },
        methods:{
            showMore: function () {
                this.isActive=!this.isActive;
            }
        },
        // watch:{
        //     isActive: function () {
        //             console.log(this.isActive)
        //             // this.isActive=false;
        //     }
        // }
        
    }
</script>


<style scoped>
    .wrap{
        height: 1.01rem;
        color: #fff;
        background: #669933;
        border-bottom: 1px solid #21897d;
        display: -webkit-box;
        display: -ms-flexbox;
        position: relative;
    }
    .wrap_left{
        height: 1.01rem;
        line-height: 1.01rem;
    }
    .wrap_a{
        height: 1rem;
        width: .45rem;
        text-decoration: none;
        outline: 0;
        line-height: 1rem;
        padding: 0 .3rem;
        display: block;
        color: inherit;

        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .head_icon{
        width: .45rem;
        height: .45rem;
        position: relative;
        font-family: base_icon;
        display: inline-block;
        vertical-align: middle;
        font-style: normal
    }
    .head_icon:before{
        content: '';
        display: block;
        position: absolute;
        left: .07rem;
        top: 0;
        width: .4rem;
        height: .4rem;
        border-bottom: .04rem solid #fff;
        border-left: .04rem solid #fff;
        -webkit-transform: scaleY(0.8) rotateZ(45deg);
        -moz-transform: scaleY(0.8) rotateZ(45deg);
        -ms-transform: scaleY(0.8) rotateZ(45deg);
    }
    .head_span{
        display: block;
        font-size: .36rem;
        -webkit-box-flex: 1;
        font-weight: 400;
        text-align: center;
        line-height: 1rem;
        margin: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .wrap_right_one{
        display: inline-block;
        height: 100%;
        line-height: 1rem;
        text-align: center;
        width: .9rem;
        text-decoration: none;
        outline: 0;
        color: inherit;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wrap_right_span{
        display: inline-block;
        font-size: .2rem;
        line-height: 1;
        vertical-align: middle;
    }
    .wrap_right_span{
        display: block;
        margin: auto;
        margin-bottom:.12rem;
    }
    .wrap_right_i{
        display: block;
        margin: auto;
        font-family: base_icon;
        vertical-align: middle;
        font-style: normal;
        font-size: .4rem;
    }
    .wrap_right_img{
        width: .55rem;
        height: .6rem;
        margin-top: .1rem;
    }
    .wrap_right_menu{
        position: absolute;

        height: 0;
        right: .04rem;
        top: 1.06rem;
        width: 2rem;
        background-color: #669933;
        z-index: 100;
        overflow: hidden;
        -webkit-transition: height .1s;
    }
    .wrap_right_menu_active{
        height: 2.5rem;
    }
    .wrap_right_menu li{
        height: .83rem;
        line-height: .83rem;
        border-bottom: 1px solid #21897d;
        text-align: center;
    }
    .more_home{
        display: block;
        color: inherit;
        height: 100%;
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
        outline: 0;

    }
</style>